<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon"
          href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg"
          mce_href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg"
          type="image/x-icon" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>裕隆元亨</title>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        p {
            margin: 0;
        }
        .app-container {
            padding-top: 50px;
            text-align: center;
            color: #000;
        }
        .location{
            font-size: 24px;
            line-height: 48px;
        }
        .user-id {
            font-size: 15px;
            color: #8d8d8d;
        }
        .logo {
            margin: 15px auto;
            width: 75%;
            height: auto;
        }
        .code-name {
            color: #8d8d8d;
            font-size: 20px;
            margin-bottom: 15px;
        }
        .button {
            width: 75%;
            display: flex;
            align-items: center;
            justify-content: center;
            /*display: inline-block;*/
            min-height: 40px;
            /*line-height: 40px;*/
            border-radius: 40px;
            background: #1b750a;
            color: #fff;
            /*margin-bottom: 6px;*/
            margin: 0 auto 6px;
            box-sizing: border-box;
            padding: 10px;
        }
        .button.has-received{
            background: #f7f7f7;
            color: #8d8d8d;
            border: 1px solid #D0D0D0;
        }
        .receive-text{
            font-size: 15px;
            color: #8d8d8d;
        }
        .has-received {
            display: none;
        }
        .hide {
            display: none;
        }
    </style>
</head>

<body>
<div class="app-container">
    <p class="location" id="location">长春亨选优品直营店</p>
    <p class="user-id hide">用户ID：<span id="userId"></span></p>
    <img class="logo" src="static/img/logo.png" alt="">
    <p class="code-name">防领码</p>
    <div class="button hide" id="receiveButton">领取</div>
    <div class="button has-received">已领取</div>
    <div class="receive-text has-received">领取时间：<span id="receiveTime"></span></div>
</div>
</body>
<script type="text/javascript" src="static/js/jquery-3.6.0.min.js"></script>
<!--<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>-->
<!--微信公众号SDK，用于使用前端公众号接口-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!--微信云服务SDK，用于调用微信云服务资源-->
<script type="text/javascript" src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.0/cloud.js"></script>
<!--封装的登录授权模块，用于一步完成授权登录步骤-->
<script type="text/javascript" src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.1/mplogin.min.js"></script>

<script>
    $(function () {
        var userId;//用户ID
        var receiveTime;//领取时间
        var $receiveButton = $('#receiveButton');

        async function handleOnLoad () {
            // 如果有需要，可以使用调试组件，在手机端查看
            // const vConsole = new window.VConsole();
            // 使用登录模块，传入信息开始授权登录过程
            // 如果首次登录，页面会经历一系列跳转过程，请不要在登录前加业务处理代码，以免登录被中断。
            const result = await window.mplogin({
                scope: "snsapi_base",             // 必填，登录方式：snsapi_userinfo、snsapi_base
                appid: 'wxa818f2c24307049d',           // 必填，公众号appid，将以此appid名义进行请求
                // redirect: '',                      // 选填，授权成功后路由的地址，目标地址应能处理授权参数，不填为当前页面
                envid: 'prod-8gh9dwidcc107cff',              // 选填，资源方微信云托管环境，如果传递此参数则会返回初始化的cloud操作对象
                // resourceAppid: 'wxaa02testenvid99',   // 选填，如果是资源复用模式，需要填资源方微信账号
                // signature: window.location.href       // 选填，如果需要微信SDK的API方法，则填写要使用的地址，会返回signature签名对象，envid参数不填则无效
                // region: ''                         // 选填，环境的地域，可选ap-guangzhou、ap-beijing，不填默认为ap-shanghai
                // traceUser:false                    // 选填，默认true，是否在将用户访问记录到用户管理中，非上海地域请设置成false
                // noback: true                       // 选填，默认noback:false，此时初次跳转授权后，模块将重新回退加载页面。
                // 由于CloudSDK在初次登录时需要多个页面跳转，最终带参返回页面在浏览器页面栈中多了一到两层
                // 你可以根据业务自行用history处理上述问题，不需要模块介入则填noback:true
            })
            console.log(result)
            if (result.ret === 0) {                 // ret为0时，代表登录已经完成，可以进行业务操作
                window.app = result.cloud             // result.cloud 返回初始化可操作的cloud函数对象，将其放置全局
                const callres = await window.app.callContainer({
                    path: '/api/hxUser',                       // 填入业务自定义路径和参数，根目录，就是 /
                    method: 'POST',                     // 按照自己的业务开发，选择对应的方法
                    header: {
                        'X-WX-SERVICE': 'hxyp',            // xxx中填入服务名称（微信云托管 - 服务管理 - 服务列表 - 服务名称）
                    }
                    // 其余参数同 wx.request
                })
                console.log(callres)
                const userInfo = callres.data.data;
                userId = userInfo.id;
                $('.hide').removeClass('hide')
                $('#userId').text(userId)
                if (userInfo.collectAt) {
                    receiveTime = userInfo.collectAt;
                    hideReceiveStyle();
                }
            } else {  // ret不为0时，代表登录出现错误，一般出现在开发调试中，正式使用一般只有2-系统拦截错误
                // 登录出现问题，打印问题描述
                window.alert(result.msg)
            }
        }

        function hideReceiveStyle() {
            $receiveButton.hide();
            $('.has-received').show();
            $('#receiveTime').text(receiveTime.replaceAll("T"," "))
        }

        $receiveButton.click(async function () {
            await collectGift()
            hideReceiveStyle();
        })

        async function collectGift(){
            const callres = await window.app.callContainer({
                path: '/api/hxUser/collect?id='+userId,                       // 填入业务自定义路径和参数，根目录，就是 /
                method: 'GET',                     // 按照自己的业务开发，选择对应的方法
                header: {
                    'X-WX-SERVICE': 'hxyp',            // xxx中填入服务名称（微信云托管 - 服务管理 - 服务列表 - 服务名称）
                }
                // 其余参数同 wx.request
            })
            console.log(callres)
            receiveTime = callres.data.data.collectAt;
        }

        handleOnLoad()
    })
</script>

</html>
